<template>
  <div class="list-container" :class="this.token?'bg-grey':'bg-white'">
    <ul v-if="this.token">
      <router-link :to="{name: 'spread'}" tag="li">
        <img class="item-icon" src="/static/img/ic_tuiguang@2x.png">
        <div class="item-ct border-bottom">
          <span class="item-title">我的推广</span>
          <div style="display: flex;align-items: center">
            <span class="invite-desc"><span class="invite-desc-text">邀请好友赚现金</span><i class="hong-bao"></i></span>
            <img class="icon-go" src="/static/img/ic_go.png"/>
          </div>
        </div>
      </router-link>
      <li @click="downloadApp()">
        <img class="item-icon" src="/static/img/bankcard.png">
        <div class="item-ct border-bottom">
          <span class="item-title">银行卡</span>
          <img class="icon-go" src="/static/img/ic_go.png"/>
        </div>
      </li>
      <router-link :to="{name: 'message'}" tag="li">
        <img class="item-icon" src="/static/img/message.png">
        <div class="item-ct border-bottom">
          <span class="item-title">消息中心</span>
          <div class="flex-box">
            <!--<i class="unred-dot"></i>-->
            <img class="icon-go" src="/static/img/ic_go.png"/>
          </div>
        </div>
      </router-link>
      <div class="divide-line"></div>
      <router-link :to="{name: 'setting'}" tag="li">
        <img class="item-icon" src="/static/img/setting.png">
        <div class="item-ct border-bottom">
          <span class="item-title">设置</span>
          <img class="icon-go" src="/static/img/ic_go.png"/>
        </div>
      </router-link>
    </ul>
    <div class="no-login" v-if="!this.token">
      <router-link tag="div" to="/login" class="login-btn">立即登录</router-link>
      <div class="register">还没有账号？
        <router-link to="/registe" tag="span" class="reg-btn">立即注册</router-link>
      </div>
    </div>
    <download-app  :content="alertContent" ref="download"></download-app>
  </div>
</template>

<script>
  import {appDownloadUrl} from '@/common/constant'
  import {mapState} from 'vuex'
  import IndexContent from "../Content"
  import  downloadApp from '@/components/alertModal.vue'
  export default {
    name: 'MyList',
    components: {IndexContent,downloadApp},
    computed: {
      ...mapState({
        token: 'token'
      })
    },
    data(){
      return{
        alertContent:{
          title:'提示',
          content:'下载“满易金”APP，获取更多服务',
          cancelButton:'取消',
          confirmButton:'立即下载'
        }
      }
    },
    methods:{
      downloadApp(){
        this.$refs.download.confirm().then((res) => {
          if (res === 'confirm') {
            window.location.href = appDownloadUrl
          }
        })
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import "~style/varibles.styl"
  .flex-box
    display flex
    align-items center
    .unred-dot
      width .1rem
      height .1rem
      background-color red
      border-radius 50%
  .list-container
    height 72.8%
    position relative
    overflow hidden
    .divide-line
      background-color $bgColor
      height .16rem
    li
      background-color white
      display: flex
      align-items: center
      .item-icon
        flex none
        height: .4rem
        width: .4rem
        padding-left: 5.86%
      .item-ct
        width 100%
        margin:0 .24rem 0 .24rem
        display: flex
        align-items: center
        justify-content: space-between
        .item-title
          color: #333333
        .icon-go
          width: .48rem
          height: .48rem
          margin: .34rem 0;
        .invite-desc
          display flex
          align-items center
          .invite-desc-text
            font-size .26rem
            color $textButton
          .hong-bao
            width .32rem
            height .36rem
            margin-left .08rem
            display inline-block
            background url("/static/img/ic_hongbao@2x.png") no-repeat
            background-size 100% 100%
    .no-login
      width 100%
      color red
      position absolute
      top 50%
      transform translateY(-50%)
      background: white
      text-align center
      .login-btn
        width 3.5rem
        height .88rem
        line-height .88rem
        color white
        border-radius .15rem
        font-size .3rem
        margin 0 auto
        background: linear-gradient(to right, $gradientDeep, $gradientTint)
      .register
        color $disabledText
        margin-top .4rem
        font-size .3rem
        .reg-btn
          color $textButton

  &.bg-white
    background-color white

  &.bg-grey
    background-color $bgColor
</style>
